<template>
	<view class="container">
		<view class="" :style="'background-image: url('+ baseUrl +'/static/turntable-bg.png);'" style="background-size: 100% 100%;padding-top: 252rpx;height: 1208rpx;">
			<view class="text-15 text-bold text-center padding-xs margin-bottom text-white" style="width: 396rpx;margin-left: calc(50% - 198rpx);background-size: 100% 100%;" :style="'background-image: url('+ baseUrl +'/static/turntable-title.png);'">
				你还有{{turntableNum}}次抽奖机会
			</view>
			<almost-lottery v-if="prizeList.length>0" :prize-list="prizeList" :ring-count="10" :duration="2" :canvas-width="canvasData.width"
			:canvas-height="canvasData.height" :prize-index="prizeIndex" @reset-index="prizeIndex = -1"
			@draw-start="handleDrawStart" @draw-end="handleDrawEnd" @finish="handleDrawFinish" />
		</view>
		<view class="flex justify-center align-center text-lg text-bold text-white padding">
			<image :src="baseUrl + '/static/t-left.png'" mode="" style="width: 52rpx;height: 18rpx;"></image> <view class="margin-right margin-left">
				中奖用户名单
			</view>	<image :src="baseUrl + '/static/r-right.png'" mode="" style="width: 52rpx;height: 18rpx;"></image>
		</view>
		<view class="" style="margin: 30rpx 48rpx 0;">
			<view class="padding radius10" style="background: #632FB5;box-shadow: 0px 0rpx 29rpx 4rpx rgba(255, 221, 239, 0.38), 0rpx 0rpx 15rpx 4rpx rgba(78, 253, 228, 0.4);">
				<view class="bg-white padding radius10">
					<view v-for="item in succes" class="flex justify-between align-center text-df text-bold margin-top">
						<view class="flex-twice" style="color: #632FB5;">
							{{item.userMobile?item.userMobile:item.userNickName}}
						</view>
						<view class="flex-sub" style="color: #632FB5;">
							······
						</view>
						<view class="flex-twice text-cut">
							<text style="color: #632FB5;">抽中</text>
							<text style="color: #EB343E;">{{item.goodsName}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex justify-center align-center text-lg text-bold text-white padding">
			<image :src="baseUrl + '/static/t-left.png'" mode="" style="width: 52rpx;height: 18rpx;"></image> <view class="margin-right margin-left">
				活动规则
			</view>	<image :src="baseUrl + '/static/r-right.png'" mode="" style="width: 52rpx;height: 18rpx;"></image>
		</view>
		<view class="padding text-white">
			<hui-parser :html="lotteryInfo.detailHtml" />
		</view>
	</view>
</template>

<script>
	import AlmostLottery from '@/components/almost-lottery/almost-lottery/almost-lottery.vue'
	import { clearCacheFile } from '@/components/almost-lottery/utils/almost-utils.js'
	export default {
		components: {
		  AlmostLottery
		},
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				// canvas 宽高
				canvasData: {
					width: 280,
					height: 280
				},
				// 奖品数据
				prizeList: [],
				// 中奖下标
				prizeIndex: -1,
				// 是否正在抽奖中
				prizeing: false,
				// 中奖类目名称
				targetName: '',
				// 奖品是否设有库存
				onStock: true,
				lotteryInfo:{},
				lotteryUser:{},
				succes:[],
				turntableNum:Number
			}
		},
		methods: {
			handleInitCanvas () {
							clearCacheFile()
							
							this.targetName = ''
			  this.prizeList = []
			  this.getPrizeList()
							
			},
			// 获取奖品列表
			async getPrizeList() {
				uni.showLoading({
					title: '奖品准备中...'
				})
const [err, res] = await this.$get(this.$api.currLottery,{
					type:1
				});
				if (res) {
					this.prizeList = res.data.lotteryGoodsList
					this.lotteryInfo=res.data.lotteryInfo
					this.lotteryUser=res.data.lotteryUser
					// console.log(res)
					this.turntableNum = this.lotteryInfo.maxLotteryNum - this.lotteryUser.lotteryNum
					this.succeedList()
				}
				if (err) {
					uni.hideLoading()
					uni.showToast({
						title: '获取奖品失败'
					})
				}
			},
			// 本次抽奖开始
		 async	handleDrawStart() {
			 let that = this
				if (this.prizeing) return
				this.prizeing = true

				this.targetName = ''
				const [err, res] = await this.$get(this.$api.info_draw,{
					type:1
				})
				if(res){
					// console.log(res)
					// this.targetName = res.data.name
						for (let i = 0; i < this.prizeList.length; i++) {
							let item = that.prizeList[i]
							if (item.id === res.data.id) {
								// 中奖下标
								that.prizeIndex = i
								break
							}
						}
				}
					// 模拟请求获取中奖信息
					// let stoTimer = setTimeout(() => {
					// 	clearTimeout(stoTimer)
					// 	stoTimer = null

					// 	console.warn('###当前处于模拟的随机中奖概率，实际场景中，中奖概率应由后端控制###')
					// 	// 这里随机产生的 prizeId 是模拟后端返回的 prizeId
					// 	let prizeId = Math.floor(Math.random() * list.length + 1)

					// 	for (let i = 0; i < list.length; i++) {
					// 		let item = list[i]
					// 		if (item.prizeId === prizeId) {
					// 			// 中奖下标
					// 			this.prizeIndex = i
					// 			break
					// 		}
					// 	}

					// 	console.log('本次抽中奖品 =>', this.prizeList[this.prizeIndex].name)

					// 	// 如果奖品设有库存
					// 	if (this.onStock) {
					// 		console.log('本次奖品库存 =>', this.prizeList[this.prizeIndex].stock)
					// 	}
					// }, 500)
			},
			// 本次抽奖结束
			handleDrawEnd() {
				this.prizeing = false
// console.log(this.prizeList)
				// 旋转结束后，可以执行拿到结果后的逻辑
				let prizeName = this.prizeList[this.prizeIndex].name

				// if (this.onStock) {
				// 	let prizeStock = this.prizeList[this.prizeIndex].stock
				// 	this.targetName = prizeName === '谢谢参与' ? prizeName : prizeStock ? `恭喜您，获得 ${prizeName}` :
				// 		'很抱歉，您来晚了，当前奖品已无库存'
				// }

				this.targetName = this.prizeList[this.prizeIndex].goodsType === 4 ? '谢谢参与' : `恭喜您，获得 ${prizeName}`
				uni.showToast({
					title: this.targetName,
					duration: 2000,
					mask: true,
					icon: 'none'
				})
				this.turntableNum--
			this.succeedList()
			},
			// 抽奖转盘绘制完成
			handleDrawFinish(res) {
				// console.log('抽奖转盘绘制完成', res)

				uni.showToast({
					title: res.msg,
					duration: 2000,
					mask: true,
					icon: 'none'
				})
			},
			// 中奖列表
						async succeedList() {
			const [err, res] = await this.$get(this.$api.log_webList,{
								lotteryInfoId:this.lotteryInfo.id,
								status:1,
								pageNum:1,
								pageSize:10
							});
							if (res) {
								this.succes = res.data.list
								console.log(res)
							}
						}
		},
		onLoad(options) {
			// 模拟请求奖品数据
			this.getPrizeList()
			
		},
		onUnload() {
			uni.hideLoading()
		}
	}
</script>

<style lang="scss" scoped>
.container{
	background-color: #632FB5;
}
</style>
